<template>
    <el-dialog v-model="state.dialog.sip.show" class="system-dialog" top="10vh" width="990px" @close="onClose">
        <template #header>
            <div class="title">系统信息</div>
        </template>
        <div class="sip-title">国标信息服务</div>
        <el-row>
            <el-col :span="8">
                <div class="sip-attr-item">
                    <div class="sip-attr-item-label">编号:</div>
                    <div>{{ state.dialog.sip.id }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="sip-attr-item">
                    <div class="sip-attr-item-label">域:</div>
                    <div>{{ state.dialog.sip.domain }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="sip-attr-item">
                    <div class="sip-attr-item-label">IP:</div>
                    <div>{{ state.dialog.sip.ip }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="sip-attr-item">
                    <div class="sip-attr-item-label">端口:</div>
                    <div>{{ state.dialog.sip.port }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="sip-attr-item">
                    <div class="sip-attr-item-label">密码:</div>
                  <div><el-tag type="primary" size="large">{{ state.dialog.sip.password }}</el-tag></div>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { DashboardState } from '@/views/admin/dashboard/interface';

const state = inject('state') as DashboardState;

const onClose = () => {
  state.dialog.sip.show = false;
};
</script>

<style scoped lang="scss">
.system-dialog {
    .title{
      font-size: 26px;
      text-align: center;
    }
    .sip-title {
        font-size: 24px;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .sip-attr-item {
        display: flex;
        flex-direction: row;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
    }

  .sip-attr-item-label{
    width: 60px;
    text-align: right;
    padding-right: 5px;
  }
}
</style>
